<template>
  <div>
    <div style="font-size:18px;">优惠券管理</div>
    <hr>
    <br>   
    <!-- <div class="filter-container"> -->
      <div class="crumbs clearfix">
        <div class="left filter-item">
            <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" placeholder="名字" v-model="listQuery.param.name">
            </el-input>
        </div>
        <div class="left filter-item" style="width: 120px;">
            <el-select v-model="listQuery.param.state" placeholder="状态" clearable >
                <el-option v-for="item in stateOptions" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
            </el-select>
        </div>
        <div class="left filter-item">
          <el-date-picker
            style="width: 200px;display: inline-block;"
            v-model="listQuery.param.MAXstartDate"
            type="datetime"
            placeholder="选择开始时间">
          </el-date-picker>
        </div>
        <div class="left filter-item">
          <el-date-picker
            style="width: 200px;display: inline-block;"
            v-model="listQuery.param.MINexpirationDate"
            type="datetime"
            placeholder="选择结束时间">
          </el-date-picker>
        </div>

        <el-button class="filter-item" style="margin-left: 30px;" type="primary"  icon="search" @click="handleFilter">搜索</el-button>
        <el-button class="filter-item" style="margin-left: 30px; float: right;" type="default" icon="plus" @click="handleAdd(1)">添加优惠券</el-button>
      </div>
    <!-- </div> -->

    <!-- 表身 -->
    <el-table :key='tableKey' :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border fit highlight-current-row style="width: 1500px">
      
      <!-- <el-table-column align="center" label="序号" 
      type="index" :index="indexMethod" width="65">
      </el-table-column> -->
      
      <el-table-column align="center" label="创建时间" width="180">
        <template scope="scope">
          <span>{{scope.row.createDateName}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="优惠券名" width="180">
        <template scope="scope">
          <span>{{scope.row.name}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="开始时间" width="180">
        <template scope="scope">
          <span>{{scope.row.startDate}}</span>
        </template>
      </el-table-column>

      <el-table-column width="180" align="center" label="过期时间">
        <template scope="scope">
          <span>{{scope.row.expirationDate}}</span>
        </template>
      </el-table-column>

      <el-table-column width="180px" align="center" label="简介">
        <template scope="scope">
          <span>{{scope.row.describe}}</span>
        </template>
      </el-table-column>

      <el-table-column width="100px" align="center" label="状态">
        <template scope="scope">
          <span>{{scope.row.state | filterStatus}}</span>
          <!-- <el-tag type="danger">{{scope.row.checkStatus}}</el-tag> -->
        </template>
      </el-table-column>
      
      <el-table-column align="center" label="操作" width="200">
        <template scope="scope">
          <el-button size="small" type="warning"  @click="handleModify(scope.row,2)">修改
          </el-button>
          <el-button v-if='scope.row.state==1' size="small" type="warning"  @click="handleStop(scope.row,0)">禁用
          </el-button>
          <el-button v-if='scope.row.state==0' size="small" type="success"  @click="handleStop(scope.row,1)">启用
          </el-button>
          <!-- <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除
          </el-button> -->
        </template>
      </el-table-column>

    </el-table>

    <div v-show="!listLoading" class="pagination-container">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.pageNumber"
        :page-sizes="[10,20,30, 50]" :page-size="listQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
    

    <!-- 修改信息对话框 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible">
      <el-form class="small-space" :model="infoTemp" label-position="left" label-width="75px" style='width: 650px; margin-left:50px;'>
        <el-form-item label="名字:">
          <el-input v-model="infoTemp.name" style="width: 200px;"></el-input>
        </el-form-item>
        <el-form-item label="描述:">
          <el-input v-model="infoTemp.describe" style="width: 200px;"></el-input>
        </el-form-item>
        <el-form-item label="满减:">
           满 
          <el-input v-model="infoTemp.conditionValue" style="width: 80px;"></el-input> 减 
          <el-input v-model="infoTemp.numberValue" style="width: 80px;"></el-input>
        </el-form-item>
        <el-form-item label="使用时间:">
          <el-date-picker
            style="width: 200px;display: inline-block;"
            v-model="infoTemp.startDate"
            type="datetime"
            placeholder="选择开始时间">
          </el-date-picker>
          --
          <el-date-picker
            style="width: 200px;display: inline-block;"
            v-model="infoTemp.expirationDate"
            type="datetime"
            placeholder="选择结束时间">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button v-if="addFlag==2" type="primary" @click="comfirmModify">确 定</el-button>
        <el-button v-if="addFlag==1" type="primary" @click="comfirmAdd">添 加</el-button>
      </div>
    </el-dialog>


  </div>
</template>
<script>
    import $ from 'jquery';
    import Vue from 'vue';
    import { couponListData } from '../../utils/resourse';


  export default {
    data() {
        return {
          rid: '',
          shop: '',
          value6: '',
          list: [],
          total: null,
          dialogDeleteVisible: false,
          num1: 100,
          listLoading: false,
          dialogTitle: '',
          addFlag: null,
          listQuery: {
              pageNumber: 1,
              pageSize: 10,
              param: {
                  shopId: '',
                  name: '',
                  state: '',
                  MAXstartDate: '',
                  MINexpirationDate : '',      // 过期时间
              },
          },
          stateOptions: [
            {id: 0,name:'停用'},
            {id: 1,name:'发行'},
            {id: 2,name:'下架'},
            {id: 3,name:'过期'},
          ],
          infoTemp: {
            id: null,
            name : "",            // 优惠券名称
            describe : "",          // 优惠券描述
            type : null,           // 优惠券类型，目前暂时就这一种；1：满减优惠券
            conditionValue : null,    // double类型参数，条件；比如：满A减B，中的A值
            numberValue : null,      // double类型参数，条件：比如：满A减B，中的B值
            issueNumber : 0,        // 发行数量，也叫用户领取的数量
            shopId : "",          // 所属店铺ID
            state : 0,
            startDate : null,       
            expirationDate: null
          },
          // calendarTypeOptions,
          dialogFormVisible: false,
          dialogStatus: '',
          tableKey: 0
        };
    },
    filters:{
      filterStatus(status){
        let key2value = {
            0:'停用',
            1: '发行',
            2: '下架',
            3: '过期',
        }
        return key2value[status]
      },
    },
    created(){
      this.rid = localStorage.getItem('rid');
      this.shop = JSON.parse(localStorage.getItem('shop'));
    },
    mounted(){
      if(this.rid!=1){
        this.listQuery.param.shopId = this.shop.shopId
      }
      this.getList()
    },
    methods: {
      getList(){
        if(this.listQuery.param.startDate){
          let start = this.listQuery.param.startDate
          this.listQuery.param.startDate = new Date(start).format('yyyy-MM-dd hh:mm:ss')
        }
        if(this.listQuery.param.expirationDate){
          let end = this.listQuery.param.expirationDate
          this.listQuery.param.expirationDate = new Date(end).format('yyyy-MM-dd hh:mm:ss') 
        }
        this.myajax("/couponInfo/list",this.listQuery,res=>{
          console.log(res)
          if(res.code==1000){
              this.list = res.data.list
              this.total = res.data.total
              // this.$notify({title: '提示',message: "添加成功",type: 'success'});
          }
        })
      },
      handleAdd(add){
        for(var key in this.infoTemp){
          this.infoTemp[key] = null
        }
        this.addFlag = add
        this.dialogFormVisible = true
      },
      comfirmAdd(){
        let data = {
            name : this.infoTemp.name,            // 优惠券名称
            describe : this.infoTemp.describe,          // 优惠券描述
            type : 1,          
            conditionValue : this.infoTemp.conditionValue,    
            numberValue : this.infoTemp.numberValue,   
            issueNumber : 0,       
            shopId : this.shop.shopId,    //店铺id       
            state : 1,
            startDate : new Date(this.infoTemp.startDate).format('yyyy-MM-dd hh:mm:ss'),       
            expirationDate: new Date(this.infoTemp.expirationDate).format('yyyy-MM-dd hh:mm:ss')
        }
        this.myajax("/couponInfo/create",data,res=>{
          console.log(res)
          if(res.code==1000){
              this.dialogFormVisible = false
              this.getList()
              this.$notify({title: '提示',message: "添加成功",type: 'success'});
          }
        });
      },
      handleStop(row,state){
        let data = {
            id: row.id,
            state: state
        }
        this.myajax("/couponInfo/updateState",data,res=>{
          console.log(res)
          if(res.code==1000){
              this.getList()
              this.$notify({title: '提示',message: "修改成功",type: 'success'});
          }
        });
      },
      handleModify(row,add) {
        this.addFlag = add
        this.infoTemp = row
        this.dialogFormVisible = true
      },
      comfirmModify(){
        let data = {
            id: this.infoTemp.id,
            name : this.infoTemp.name,            // 优惠券名称
            describe : this.infoTemp.describe,          // 优惠券描述
            conditionValue : this.infoTemp.conditionValue,    
            numberValue : this.infoTemp.numberValue,  
            type : 1,          
            startDate : new Date(this.infoTemp.startDate).format('yyyy-MM-dd hh:mm:ss'),       
            expirationDate: new Date(this.infoTemp.expirationDate).format('yyyy-MM-dd hh:mm:ss'),
        }
        console.log(data)
        this.myajax("/couponInfo/update",data,res=>{
          console.log(res)
          if(res.code==1000){
            this.dialogFormVisible = false
            this.getList()
            this.$notify({title: '提示',message: "修改成功",type: 'success'});
          }
        })
      },
      handleFilter() {       //条件搜索
        this.listQuery.pageIndex = 1
        if(this.listQuery.start){
          this.listQuery.start = parseTime1(this.listQuery.start)
          // console.log(this.listQuery.end)
        }else{
          this.listQuery.start = null
        }
        this.getList()
      },
      handleSizeChange(val) {
        this.listQuery.pageSize = val
        this.getList()
      },
      handleCurrentChange(val) {
        this.listQuery.pageIndex = val
        this.getList()
      },
      // handleDelete(row) {
      //   this.$confirm('此操作将永久删除该优惠券, 是否继续?', '提示', {
      //     confirmButtonText: '确定',
      //     cancelButtonText: '取消',
      //     type: 'warning'
      //   }).then(() => {
      //     let data = {
      //         id: row.id
      //     }
      //     this.myajax("/couponInfo/deleteOne",data,res=>{
      //       console.log(res)
      //       if(res.code==1000){
      //           this.$message({
      //             type: 'success',
      //             message: '删除成功!'
      //           });
      //           this.getList()
      //           // this.$notify({title: '提示',message: "修改成功",type: 'success'});
      //       }
      //     });
      //   }).catch(() => {                 
      //   });
      // },
    }
  };
</script>
<style scoped>
    .input_edit{
        width: 200px;
        float: left;
        margin-right:10px;
    }
    .left{
        float: left;
        padding-right:30px;
    }
    .cell{
        padding: 0 5px !important;
        overflow: auto;
    }
    .filter-container {
      padding-bottom: 10px;
    }
    .filter-item {
      /*display: inline-block;
      vertical-align: middle;*/
      margin-bottom: 20px;

    }
    .avatar {
      width: 90px;
      height: 90px;
      /*border-radius: 50%;*/
      margin-top: 10px;
      margin-bottom: 10px;
      display: block;
    }
</style>
